<template>
  <el-container>
    <el-header class="el-header">
      <el-row>
        <el-col :span="1">
          <img src="../img/logo.jpg" class="logo_img"/>
        </el-col>

        <el-col :span="8" :offset="7">
          <h1 class="el-header-h1">图 书 馆 座 位 预 约</h1>
        </el-col>

        <el-menu
          mode="horizontal"
          :default-ative="activeIndex2"
          :ellipsis="false"
          background-color="rgb(238, 241, 246)"
          text-color="#545c64"
          active-text-color="#ffd04b"
          menu-trigger="click"
          @select="handleSelect"
          class="header-el-menu"
        >
          <el-menu-item index="1">
            <img src="../img/dog.png" title="修改头像" v-on:click="edit()"/>
          </el-menu-item>

          <el-menu-item index="2">
            <div class="accountname">{{this.$store.state.accountInfo.accountname}}</div>
          </el-menu-item>

          <el-sub-menu index="3">
            <template #title>处理中心</template>
            <el-menu-item index="3-1"> 已处理消息 </el-menu-item>
            <el-menu-item index="3-2"> 未处理消息 </el-menu-item>
            <el-menu-item index="3-3"> 投诉评价 </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="4">
            <router-link to="/AdminIndex" target="_self">首页</router-link>
          </el-menu-item>

          <el-menu-item index="5">
            <router-link to="/" target="_self">退出</router-link>
          </el-menu-item>
        </el-menu>
      </el-row>
    </el-header>

    <el-container>
      <el-aside class="el-aside">
        <el-row>
          <el-col :span="24">
            <el-menu :default-openeds="['1']">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><List /></el-icon>
                  座位管理
                </template>

                <el-menu-item-group>
                  <el-menu-item index="1-1">
                    <el-icon><Avatar /></el-icon>
                    教室管理
                  </el-menu-item>
                  <el-menu-item index="1-2">
                    <el-icon><Edit /></el-icon>
                    <router-link to="/com/RoomManagerVue">座位预定管理</router-link>
                  </el-menu-item>
                  <el-menu-item index="1-3">
                    <el-icon><Lock /></el-icon>
                    <router-link to="/com/ShiJianDuanVue">时间段管理</router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>

              <el-sub-menu index="2">
                <template #title>
                  <el-icon><Platform /></el-icon>
                  用户管理
                </template>

                <el-menu-item-group>
                  <el-menu-item index="2-1">
                    <el-icon><Pointer /></el-icon>
                    <router-link to="/com/SelectUserVue">查询用户</router-link>
                  </el-menu-item>
                  
                </el-menu-item-group>
              </el-sub-menu>

              <el-sub-menu index="3">
                <template #title>
                  <el-icon><Promotion /></el-icon>
                  系统设置
                </template>

                <el-menu-item-group>
                  <el-menu-item index="2-1">
                    <el-icon><ChatDotRound /></el-icon>
                    <router-link to="/com/JianYiVue">个人反馈信息</router-link>
                  </el-menu-item>
                  <el-menu-item index="2-2">
                    <el-icon><Message /></el-icon>
                    收件箱
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>

      <el-main class="rigth-el-main">
        <!-- 中间右边主体部分 -->
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
  
</template>

<script>

export default {
  name: "AdminIndex",
  data() {
    return {
    }
  },
  methods: {
    edit() {
      this.$router.push("/com/EditTouXiangVue");
    },
    // select(){
    //   this.$router.push("/com/SelectUserVue");
    // },
    getInfo() {
      this.$router.push("/com/SelectUserVue");
    }
  },
  mounted() {
    this.getInfo();
  }
}
</script>

<style scoped>
/*头部样式*/
.logo_img{
  height: 58px;
}
.el-header {
  background-color: rgb(238, 241, 246);
  height: 62px;
}
.el-header img {
  width: 59px;
}
.el-header-h1 {
  color: deepskyblue;
  font-size: 40px;
  margin: 0 50px 0;
}
.header-el-menu {
  margin-left: 20px;
}
.accountname {
  color: #007dff;
  font-size: 26px;
}

/*侧边栏样式*/
.el-aside {
  height: 659px;
  background-color: rgb(238, 241, 246);
}

/*主区域样式*/
.rigth-el-main{
  background-color: rgb(238, 241, 246);
  margin: 10px 0 0 10px;
  /* height: 80%; */
}
</style>
